<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>模拟数据</span>
        <el-button
          :type="flowStore.loaderType == 'fake' ? 'success' : 'primary'"
          size="small"
          :disabled="!valid"
          @click="handleLoad"
        >
          <span>{{ flowStore.loaderType == "fake" ? "已加载" : "加载" }}</span>
        </el-button>
      </div>
    </template>
    <el-form label-width="80px">
      <el-form-item label="流量参考">
        <el-date-picker
          v-model="formData.date"
          type="date"
          placeholder=""
          format="YYYY-MM-DD"
          style="width: 160px"
        />
        <span style="padding: 0 6px"></span>
        <el-button type="primary" text :disabled="!valid" @click="handlePreview"
          >查看详情</el-button
        >
      </el-form-item>
      <el-form-item label="起降架次">
        <el-radio-group v-model="formData.equal">
          <el-radio :value="true">同步设置</el-radio>
          <el-radio :value="false">独立设置</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="双流起/降">
        <el-input-number
          v-model="formData.content.zuuu[0]"
          :min="10"
          :max="999"
          style="width: 120px"
        />
        <span style="padding: 0 6px"></span>
        <el-input-number
          v-if="!formData.equal"
          v-model="formData.content.zuuu[1]"
          :min="10"
          :max="999"
          style="width: 120px"
        />
        <span v-else>×2</span>
      </el-form-item>
      <el-form-item label="天府起/降">
        <el-input-number
          v-model="formData.content.zutf[0]"
          :min="10"
          :max="999"
          style="width: 120px"
        />
        <span style="padding: 0 6px"></span>
        <el-input-number
          v-if="!formData.equal"
          v-model="formData.content.zutf[1]"
          :min="10"
          :max="999"
          style="width: 120px"
        />
        <span v-else>×2</span>
      </el-form-item>
      <el-form-item label="绵阳起/降">
        <el-input-number
          v-model="formData.content.zumy[0]"
          :min="10"
          :max="999"
          style="width: 120px"
        />
        <span style="padding: 0 6px"></span>
        <el-input-number
          v-if="!formData.equal"
          v-model="formData.content.zumy[1]"
          :min="10"
          :max="999"
          style="width: 120px"
        />
        <span v-else>×2</span>
      </el-form-item>
    </el-form>
    <el-alert
      v-if="!valid"
      title="流量参考日期应不晚于当前日期"
      type="error"
      :closable="false"
      show-icon
    />
    <ReferanceViewer ref="referanceViewer" />
  </el-card>
</template>

<script setup>
import { ref, computed, onMounted, h } from "vue";
import { ElMessageBox, ElNotification } from "element-plus";
import useFlowStore from "@/store/flow.js";
import dayjs from "dayjs";
import loadData from "./utils/loader.js";
import ReferanceViewer from "./ReferanceViewer.vue";

const flowStore = useFlowStore();
const formData = flowStore.loaderConfig.fake;

const referanceViewer = ref();

const valid = computed(() => {
  let day = dayjs(formData.date);
  let today = dayjs();
  if (!day.isSameOrBefore(today, "day")) {
    return false;
  }
  return true;
});

const range = computed(() => {
  let start = dayjs(formData.date).format("YYYY-MM-DD") + " 04:00:00";
  let end =
    dayjs(formData.date).add(1, "day").format("YYYY-MM-DD") + " 04:00:00";
  return { start, end };
});

const handlePreview = () => {
  loadData(range.value, false).then((res) => {
    referanceViewer.value.open(res);
  });
};

const handleLoad = () => {
  flowStore.loaderType = "fake";
  flowStore.autoRefresh = false;
  flowStore.ignoreWarning = true;
  formData.total = 0;
  if (formData.equal) {
    formData.content.zuuu[1] = formData.content.zuuu[0];
    formData.content.zutf[1] = formData.content.zutf[0];
    formData.content.zumy[1] = formData.content.zumy[0];
  }
  loadData(range.value).then((res) => {
    console.log("模拟数据", res);
    let totals = {
      zuuu: [0, 0],
      zutf: [0, 0],
      zumy: [0, 0],
      all: 0,
    };
    let tags = res.tags.map((tag) => tag.split("_"));
    res.rawData.forEach((data) => {
      tags.forEach((tag, i) => {
        totals.all += data[i];
        if (tag[0] == "ZUUU") {
          if (tag[1] == "DEP") {
            totals.zuuu[0] += data[i];
          } else if (tag[1] == "ARR") {
            totals.zuuu[1] += data[i];
          }
        } else if (tag[0] == "ZUTF") {
          if (tag[1] == "DEP") {
            totals.zutf[0] += data[i];
          } else if (tag[1] == "ARR") {
            totals.zutf[1] += data[i];
          }
        } else if (tag[0] == "ZUMY") {
          if (tag[1] == "DEP") {
            totals.zumy[0] += data[i];
          } else if (tag[1] == "ARR") {
            totals.zumy[1] += data[i];
          }
        }
      });
    });
    let ratios = {
      zuuu: [
        formData.content.zuuu[0] / totals.zuuu[0],
        formData.content.zuuu[1] / totals.zuuu[1],
      ],
      zutf: [
        formData.content.zutf[0] / totals.zutf[0],
        formData.content.zutf[1] / totals.zutf[1],
      ],
      zumy: [
        formData.content.zumy[0] / totals.zumy[0],
        formData.content.zumy[1] / totals.zumy[1],
      ],
    };
    let outputTotal = 0;
    let output = res.rawData.map((line) => {
      return line.map((cell, i) => {
        let cellNew = 0;
        if (tags[i][0] == "ZUUU") {
          if (tags[i][1] == "DEP") {
            cellNew = Math.round(cell * ratios.zuuu[0]);
          } else if (tags[i][1] == "ARR") {
            cellNew = Math.round(cell * ratios.zuuu[1]);
          }
        } else if (tags[i][0] == "ZUTF") {
          if (tags[i][1] == "DEP") {
            cellNew = Math.round(cell * ratios.zutf[0]);
          } else if (tags[i][1] == "ARR") {
            cellNew = Math.round(cell * ratios.zutf[1]);
          }
        } else if (tags[i][0] == "ZUMY") {
          if (tags[i][1] == "DEP") {
            cellNew = Math.round(cell * ratios.zumy[0]);
          } else if (tags[i][1] == "ARR") {
            cellNew = Math.round(cell * ratios.zumy[1]);
          }
        }
        outputTotal += cellNew;
        return cellNew;
      });
    });
    // console.log("Total: " + outputTotal);
    // console.log("rawData ", output);
    flowStore.rawData = output;
    formData.total = outputTotal;
    flowStore.begTime = dayjs(flowStore.begTime)
      .year(2099)
      .format("YYYY-MM-DD HH:mm:ss");
    let supposedTotal =
      formData.content.zuuu[0] +
      formData.content.zuuu[1] +
      formData.content.zutf[0] +
      formData.content.zutf[1] +
      formData.content.zumy[0] +
      formData.content.zumy[1];
    ElNotification({
      type: "success",
      position: "bottom-right",
      duration: 10000,
      title: "模拟数据",
      message: h("div", null, [
        h(
          "div",
          null,
          "因四舍五入取整，输入的数值合计与实际输出的数值合计存在差异："
        ),
        h(
          "div",
          {
            style: {
              fontSize: "24px",
              fontWeight: "bolder",
            },
          },
          [
            h("span", null, supposedTotal),
            h("span", null, " / "),
            h("span", null, outputTotal),
          ]
        ),
      ]),
    });
  });
};
</script>

<style scoped>
@import "./styles/card.css";
</style>
